<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/yddreset.css" />
    <link rel="stylesheet" href="css/goodsinfo.css" />

    <script src="css/jquery.js"></script>
    <script src="css/FDJ.js"></script>
    <script src="css/goodsinfo.js"></script>
    <script src="css/jquery.lazyload.js"></script>
    <script src="js/magiczoom/magiczoom.js"></script>
    <script src="css/cats.js"></script>

    <title>Document</title>
</head>
<body>

<header class="header">

</header>

<div class="nav">
    <a class="newagg" href="https://www.newegg.cn"></a>
    <input placeholder="请输入你要搜索的关键字">
    <button>搜索</button>

</div>


<div class="C-box">
    <ul class="C-head">
        <li>首页</li>
        <li>限时抢购</li>
        <li>团团赚</li>
        <li>爱车配</li>
        <li>二手宝库</li>
    </ul>
</div>



<div class="showtitle">
    <pre>        华为 HUAWEI Mate 20 X 麒麟980芯片微距影像大广角徕卡三摄6GB+128GB宝
        石蓝全网通版双4G手机</pre>
</div>

<div class="FDJ">
    <div id="smallImg"
         style="float:left;width: 400px; height: 400px; background: url(https://c3.neweggimages.com.cn/neweggpic2/neg/P640/A28-800-87J.jpg) center; background-size: cover; position: absolute; left: 100px; top: 400px;">
        <div id="smallArea"
             style="display: none; width: 40px; height: 40px; background: rgba(200, 250, 200, 0.4); position: absolute; left: 160px; top: 0;">
        </div>
    </div>

    <div id="bigArea"
         style="display: none;float:left;overflow: hidden; width: 400px; height: 400px; background: rgba(200, 200, 250, 0.5); position: absolute; left: 600px; top: 400px;">
        <img id="bigImg" src="https://c3.neweggimages.com.cn/neweggpic2/neg/P640/A28-800-87J.jpg"
             style="width:800px; height:800px; position: absolute; left: 0; top:0;" />
    </div>



</div>




<section>





    <ul id="lazy-PIC">

    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_01.jpg">
        </a>
    </li>

    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_03.jpg">
        </a>
    </li>
    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_04.jpg">
        </a>
    </li>
    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_05.jpg">
        </a>
    </li>
    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_06.jpg">
        </a>
    </li>
    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_07.jpg" alt="Corvette Pitstop">
        </a>
    </li>
    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_08.jpg">
        </a>
    </li>
    <li>
        <a href="#">
            <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_09.jpg">
        </a>
    </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_10.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_11.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_12.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_13.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_14.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_15.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_16.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_17.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img class="lazy" data-original="https://c1.neweggimages.com.cn/NeweggPic2/Description/CD02/A28-800-87H_18.jpg">
            </a>
        </li>

</ul>


</ul>

</section>










<footer class="footer">


</footer>

</body>
</html>

<script>
    $(function () {
        $("img").lazyload({
            placeholder : "img/timg.gif", //用图片提前占位
            effect: "fadeIn", // 载入使用何种效果
            // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
            threshold: 200, // 提前开始加载
        });
    })
</script>

